<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">好物搜搜</p>
    </van-nav-bar>
    <van-search :autofocus="bool" v-model="searchValue" placeholder="请输入搜索关键词" @input="search"/>
    <van-empty image="search" v-if="!searchList||!searchList.length" description="没有搜索结果"></van-empty>
    <van-row>
      <van-col span="12" v-for="(item,index) in searchList" :key="index">
        <div style="padding: 5px">
          <shop-card :shop-data="item"/>
        </div>
      </van-col>
    </van-row>
<!--    <ul class="searchList">-->
<!--      <router-link v-for="(item,index) in searchList" :to="'/shopDetail/'+item.proid" tag="li"-->
<!--                   :key="index">{{ item.proname }}-->
<!--      </router-link>-->
<!--    </ul>-->
  </div>
</template>

<script>
import { NavBar, Search } from 'vant'

import Vue from 'vue'
import { getSearchShoplist } from '../../api/commodity'
import ShopCard from '../../components/shop/ShopCard'

Vue.use(NavBar)
Vue.use(Search)
export default {
  name: 'Keep',
  data () {
    return {
      searchValue: '',
      searchList: [],
      bool:true
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    search (value) {
      this.searchValue = value
      if (value.length === 0) {
        this.searchList = []
        return;
      }
      getSearchShoplist(value).then(res => {
        this.searchList = res.data
      })
      console.log(value)
    }
  },
  components:{
    ShopCard,
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.searchList {
  background: #fff;
  padding: 0 12px;
  text-align: left;
  list-style: none;
  font-size: 13px;

  li {
    padding: 0;
    border-bottom: 1px solid #eeeeee;
    line-height: 40px;
    height: 40px;
  }
}
</style>
